import { UserOutlined } from '@ant-design/icons';
import { Row, Col, Avatar, Divider } from 'antd';
import styles from './style/index.less';

export interface UserInfoProps {
  username: string;
  avatar?: string;
  editTzflCount?: number;
  tzflCount?: number;
  editDgCount?: number;
  dgCount?: number;
  editFjCount?: number;
  fjCount?: number;
}

const UserInfo = (props: UserInfoProps) => {
  const { username, avatar, editTzflCount, editDgCount, editFjCount, tzflCount, dgCount, fjCount} = props;

  return (
    <div className={styles.container}>
      <Row align="middle">
        <Col span={23} className={styles.title}>
          个人信息
        </Col>
      </Row>
      <Row style={{ flexGrow: 1 }}>
        <Col span={23} className={styles.avatar}>
          {!avatar ? <Avatar size={120} src={require('./avatar.png')} /> : <div></div>}
          <p>{username}</p>
        </Col>
      </Row>
      <Row className={styles.footer}>
        <Col span={7}>
          <div>
            <p>调整分录数</p>
            <p><span className={styles.strong}>{editTzflCount}</span> / <span className={styles.light}>{tzflCount}</span></p>
          </div>
        </Col>
        <Col span={1}>
          <Divider type="vertical"></Divider>
        </Col>
        <Col span={7}>
          <div>
            <p>底稿数</p>
            <p>
              <span className={styles.strong}>{editDgCount}</span> / <span className={styles.light}>{dgCount}</span>
              {/* <span className={styles.light}> / 24 </span> */}
            </p>
          </div>
        </Col>
        <Col span={1}>
          <Divider type="vertical"></Divider>
        </Col>
        <Col span={7}>
          <div>
            <p>附件数</p>
            <p><span className={styles.strong}>{editFjCount}</span> / <span className={styles.light}>{fjCount}</span></p>
          </div>
        </Col>
      </Row>
    </div>
  );
};

export default UserInfo;
